<template>
  <div>
    <Echart
      :options="options"
      id="centreLeft1Chart"
      height="300px"
      width="500px"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options =  {
            title: {
                x: 'center',
                y: 'center',
                textStyle: {
                    fontSize: 20
                }
            },
            tooltip: {
                trigger: 'item'
            },
            color: [
                '#58b2ff', '#68d4b2', '#7380ff', '#fdd56a', '#fdb36a', '#fd866a', '#9e87ff'
            ],
            series: [{
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['40%', '65%'],
                clockwise: true,
                avoidLabelOverlap: true,
                hoverOffset: 15,
                itemStyle: {
                    normal: {

                    }
                },
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{a|{b}：{d}%}\n{hr|}',
                    rich: {
                        a: {
                            padding: [0,0,-10,0]
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 20,
                        length2: 30,
                        lineStyle: {
                            width: 1
                        }
                    }
                },
                data: newData.serData,
            }]
        };
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
</style>